<template>
  <div class="gopay">
    <!-- 基本信息 -->
    <div>
      <el-table :data="tableData" size="mini" border>
        <el-table-column prop="orderNum" label="订单号" width="180">
        </el-table-column>
        <el-table-column prop="classification" label="分类" width="180">
        </el-table-column>
        <el-table-column prop="describe" label="描述"> </el-table-column>
        <el-table-column prop="price" width="180" label="价格(元)">
        </el-table-column>
      </el-table>
      <div style="margin: 10px 0 0 85%; color: red">
        <span>合计￥：</span>
        <span>{{ ruleForm.totalCost }}</span>
      </div>
    </div>
    <!-- 支付方式 -->
    <div style="margin: 20px 0 0 30px">
      <div style="margin: 0 0 20px 0">支付方式</div>
      <div>
        <el-radio-group v-model="radio" @change="radioType">
          <el-radio :label="1">信用卡</el-radio>
          <el-radio :label="2">借记卡</el-radio>
          <el-radio :label="3">预留款</el-radio>
          <!-- <el-radio :label="4">月结</el-radio> -->
          <el-radio :label="5">银联扫码_自动支付</el-radio>
          <!-- <el-radio :label="6">线下易宝</el-radio> -->
          <!-- <el-radio :label="7">线下银联卡</el-radio> -->
        </el-radio-group>
      </div>
    </div>
    <!-- 常用银行卡 -->
    <div style="margin: 20px 0 0 30px" v-if="this.way == 1 || this.way == 2">
      <div style="margin: 0 0 20px 0">常用银行卡</div>
      <div style="margin:0 0 20px 0" v-show="mationbank">
        <el-form :model="informationbank" size="mini" style="display:flex">
          <el-form-item label="银行名称" style="display:flex;margin:0 30px 0 0">
            <el-input v-model="informationbank.bankName"></el-input>
          </el-form-item>
          <el-form-item label="账号" style="display:flex;margin:0 30px 0 0">
            <el-input v-model="informationbank.cardNumber"></el-input>
          </el-form-item>
          <el-form-item label="开卡人" style="display:flex;margin:0 30px 0 0">
            <el-input v-model="informationbank.cardholder"></el-input>
          </el-form-item>
          <el-form-item label="卡类型" style="display:flex;margin:0 30px 0 0">
            <el-input v-model="informationbank.cardType"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table :data="cardList" size="mini" border>
          <el-table-column prop="bankName" label="银行名称" width="300"></el-table-column>
          <el-table-column prop="cardholder" width="220" label="开卡人">
          </el-table-column>
          <el-table-column prop="cardNumber" label="卡号"></el-table-column>
          <el-table-column prop="name" label="操作" width="300">
            <template slot-scope="scope">
              <el-button style="background-color: #6090ec; color: #fff" size="mini" @click="btnModify(scope.row)">使用
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 预留款 -->
    <div style="margin: 20px 0 0 30px" v-if="this.way == 3">
      <div style="margin: 0 0 20px 0;display:flex;">
        <div>预留款:</div>
        <div style="color:red" v-if="this.ruleForm.gold > this.ruleForm.totalCost">当前账户预留款充足,可以使用预留款支付</div>
        <div style="color:red" v-if="this.ruleForm.gold < this.ruleForm.totalCost">当前账户预留款不足以支付订单金额,请选择其他支付方式</div>
      </div>
      <el-form ref="form" :model="ruleForm" size="mini">
        <div style="display: flex">
          <el-form-item label="预留款余额">
            <el-input :disabled="true" style="width: 200px" v-model="ruleForm.gold"></el-input>
          </el-form-item>
          <el-form-item label="订单总金额" style="margin: 0 0 0 20px">
            <el-input :disabled="true" style="width: 200px" v-model="ruleForm.totalCost"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="使用预留款">
            <el-input :disabled="true" style="width: 200px" v-model="ruleForm.totalCost"></el-input>
          </el-form-item>
          <el-form-item label="实际未支付金额" style="margin: 0 0 0 20px">
            <el-input :disabled="true" style="width: 200px" v-model="ruleForm.totalCost"></el-input>
          </el-form-item>
          <el-form-item label="使用后预留款余额" style="margin: 0 0 0 20px">
            <el-input :disabled="true" style="width: 200px" v-model="asidemoney"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div v-if="this.way == '5'" style="margin:30px 0 0 30%">
              <div class="index-body" >
        请将此二维码发给会员
        <div class="qrcode">
          <img :src="qrcode" alt="" />
          <!-- 这里的src的值就是生成的二维码的地址 -->
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <!-- <el-button type="primary" style="margin:0 0 0 15%" @click="dialogVisible = false">确 定</el-button> -->
      </span>
   
    <!-- 二维码支付弹窗 -->
    <!-- <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> -->
      
      </div>
   <div style="margin: 20px 20px 10px 40%" >
      <el-button type="primary" @click="pay">支付</el-button>
      <el-button type="primary" @click="cancel">关闭</el-button>

    </div>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
import QRCode from "qrcode";
export default {
  name: "gopay",
  data() {
    return {
      ruleForm: {},
      url: "https://qr-test2.chinaums.com/bills/qrCode.do?id=31942204267644957131195222", //识别二维码后跳转的地址或文本
      qrcode: "", //存储二维码图片的路径
      items: {},
      olgData: [],
      tabs: [],
      orderId: this.$route.params.orderId,
      type: this.$route.params.type,
      message: {},
      dialogVisible: false,
      orderId: this.$route.params.orderId,
      dialogVisible: false,
      // 银行卡信息
      informationbank: {},
      // mationbank: "",
      // 银行卡id
      bankCardId: 0,
      // 银行卡数组
      cardList: [],
      // 预留款
      asidemoney: "",
      // 支付方式
      way: "",
      radio: 7,
      // 订单id
      ticketid: "",
      // 基本信息
      tableData: [],
      // 常用银行卡
      cardData: [],
      as: "",
    };
  },
  methods: {
    cancel() {
      this.$router.push('/iflight/iflightOrder');
    },
    // 支付
    getinternationalTicketPay(a) {
      console.log(a, '接收过来的参数')

      this.$axios.getinternationalTicketPay({
        orderId: this.ruleForm.orderId,
        // 支付类型
        payType: this.as,
        // 订单号
        orderNum: this.tableData[0].orderNum,
        // 会员id
        customerId: this.ruleForm.customerId,
        // 金额
        moneyAmout: this.ruleForm.totalCost,
        // 适用渠道
        payWay: 'Crm',
        // 银行卡id
        bankCardId: this.bankCardId,
      }).then((res) => {
        console.log(res)
        if (res.code == '200') {
          this.url = res.data.msg;
            this.$message({
                message: res.data.msg,
                type: "success",
              });
        }
      })
    },
    // 支付按钮
    pay() {
      this.getinternationalTicketPay(this.as)
      // if (this.way == '5') {
      // this.getinternationalTicketPay(this.way)
      this.dialogVisible = true;

      console.log('图片路径',this.url)
      // this.url = res.data.billQRCode;
      QRCode.toDataURL(this.url, {
        //这个this.url就是你扫码后要跳转的地址
        version: 7, //版本号
        errorCorrectionLevel: "Q", //容错率,(建议选较低)更高的级别可以识别更模糊的二维码，但会降低二维码的容量
        width: 280, //设置二维码图片大小
        height: 280,
      })
        .then((url) => {
          console.log(url); //这个url是二维码生成地址，也就是相当于图片地址
          this.qrcode = url; //赋值给变量。用在img的src属性上
        })
        .catch((err) => {
          console.error(err);
        });
      // }
      // this.getinternationalTicketPay()
    },
    // 使用
    btnModify(row) {
      console.log(row)
      this.informationbank = row
      if (this.informationbank) {
        this.mationbank = true
      }
      console.log(this.informationbank)
      this.bankCardId = row.bankCardId
    },
    mationbank() {

    },
    // 支付方式
    radioType(row) {
      console.log('我是支付方式', row);
      this.way = row;
      if (this.way == '1') {
        this.as = 'creditcard'
      }
      if (this.way == '2') {
        this.as = 'debitcard'
      }
      if (this.way == '5') {
        this.as = 'unionPayQR'
      }
      if (this.way == '3') {
        this.as = 'reserveMoney'
      }
      console.log(this.as, '我是点击事件的as')
      if (this.way == "1" || this.way == "2") {
        this.postbackSelectCard()
      }


    },
    // 常用卡
    postbackSelectCard() {
      this.$axios
        .postbackSelectCard({
          memberId: this.ruleForm.customerId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.cardList = this.screen(res.data);
          } else {
            this.$message({
              message: "输入信息不正确，请核对后重新查询",
              type: "warning",
            });
          }
        });
    },

    // 选择卡类型
    screen(row) {
      console.log(row)
      if (this.way == "1") {
        let arr = row.filter(item => {
          return item.cardType == '信用卡'
        })
        console.log(arr)
        return arr
      } else if (this.way == "2") {
        let arr = row.filter(item => {
          return item.cardType == '借记卡'
        })
        console.log(arr)
        return arr
      }
    },
    // 详情
    getselectTmpIflightOrderVo() {
      this.$axios
        .getselectTmpIflightOrderVo({
          id: this.ticketid,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.ruleForm = res.data;
            this.tableData = this.ruleForm.tmpIflightOrderList
            this.asidemoney = (this.ruleForm.gold) - (this.ruleForm.totalCost)
            console.log(this.asidemoney)
          } else {
            this.$message({
              message: "输入信息不正确，请核对后重新查询",
              type: "warning",
            });
          }
        });
    },
    //跳出
    closeLoading() {
      this.tableLoading.close();
    },
    //进入
    showLoading() {
      this.tableLoading = this.$loading({
        text: "拼命加载数据中", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
        target: document.querySelector("#table"), //loadin覆盖的dom元素节点
      });
    },
  },
  mounted() {
    // 订单id
    this.ticketid = this.$route.params.ticketid;
    console.log(this.ticketid);
    // 详情
    this.getselectTmpIflightOrderVo();
  },
};
</script>

<style scoped>
.gopay {
  margin: 20px;
}
</style>